<template>
  <div class="medical-guide-container">
    <!-- 状态栏 -->
    <div class="status-bar">
      <span class="time">12:30</span>
      <div class="status-icons">
        <span class="signal">📶</span>
        <span class="wifi">📶</span>
        <span class="battery">🔋</span>
      </div>
    </div>

    <!-- 头部 -->
    <div class="header">
      <div class="header-left">
        <div class="back-button" @click="goBack">←</div>
        <h1 class="page-title">就医指南</h1>
      </div>
      <div class="header-right">
        <div class="menu-icon">⋯</div>
        <div class="target-icon">🎯</div>
      </div>
    </div>

    <!-- 通知横幅 -->
    <div class="notification-banner" @click="handleNotificationClick">
      <div class="banner-content">
        <div class="banner-text">
          <span>叮~ 你有一份</span>
          <span class="highlight">门诊挂号预约指南</span>
          <span>待查收</span>
        </div>
        <div class="banner-action">请点击查收~</div>
      </div>
    </div>

    <!-- 全部指南标题 -->
    <div class="section-header">
      <h2>全部指南</h2>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <div class="loading-text">加载中...</div>
    </div>

    <!-- 指南列表 -->
    <div v-else class="guide-list">
      <div 
        v-for="guide in guideList" 
        :key="guide.GuideId"
        class="guide-item"
        @click="showGuideDetail(guide)"
      >
        <div class="guide-content">
          <div class="guide-title">{{ guide.Title }}</div>
          <div class="guide-date">{{ formatDate(guide.CreatedAt) }}</div>
        </div>
        <div class="guide-stats">
          <span class="view-count">{{ guide.Views }}人已查看</span>
          <span class="arrow">></span>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="bottom-nav">
      <div class="nav-item" @click="goToHome">
        <div class="nav-icon">🏠</div>
        <div class="nav-text">诊疗首页</div>
      </div>
      <div class="nav-item" @click="showFeatureNotReady">
        <div class="nav-icon">☁️</div>
        <div class="nav-text">微官网</div>
      </div>
      <div class="nav-item" @click="showFeatureNotReady">
        <div class="nav-icon">💬</div>
        <div class="nav-text">消息中心</div>
      </div>
      <div class="nav-item" @click="goToProfile">
        <div class="nav-icon">👤</div>
        <div class="nav-text">我的</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import OutpatientApi from '@/utils/Interceptors'

const router = useRouter()

// 定义指南类型
interface GuideItem {
  GuideId: number
  Title: string
  Content: string
  HospitalId: number
  HospitalName: string
  Steps: string
  Views: number
  CreatedAt: string
  UpdatedAt: string
}

// 响应数据接口
interface ApiResponse {
  code: number
  msg: string
  data: GuideItem[]
}

// 状态管理
const loading = ref(false)
const guideList = ref<GuideItem[]>([])

// 获取指南数据
const fetchGuideData = async () => {
  try {
    loading.value = true
    console.log('开始获取指南数据...')
    const response = await OutpatientApi.get('/api/ConsultationCategory/GetAllGuides')
    console.log('API响应:', response)
    const result: ApiResponse = response.data
    console.log('解析后的数据:', result)
    
    if (result.code === 200) {
      guideList.value = result.data
      console.log('指南数据加载成功，共', result.data.length, '条记录')
    } else {
      console.error('API返回错误:', result.msg)
      showToast({
        message: result.msg || '获取指南数据失败',
        position: 'middle',
        duration: 2000
      })
    }
  } catch (error: any) {
    console.error('获取指南数据失败:', error)
    let errorMessage = '网络错误，请稍后重试'
    
    // 检查是否是网络错误
    if (error.response) {
      // 服务器返回了错误状态码
      console.error('服务器错误:', error.response.status, error.response.data)
      if (error.response.status === 404) {
        errorMessage = 'API接口不存在'
      } else if (error.response.status === 500) {
        errorMessage = '服务器内部错误'
      } else {
        errorMessage = `请求失败 (${error.response.status})`
      }
    } else if (error.request) {
      // 请求已发出但没有收到响应
      console.error('网络连接错误:', error.request)
      errorMessage = '无法连接到服务器，请检查网络连接'
    } else {
      // 其他错误
      console.error('其他错误:', error.message)
      errorMessage = '请求配置错误'
    }
    
    showToast({
      message: errorMessage,
      position: 'middle',
      duration: 3000
    })
  } finally {
    loading.value = false
  }
}

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

// 方法
const goBack = () => {
  router.back()
}

const handleNotificationClick = () => {
  showToast({
    message: '门诊挂号预约指南已查收',
    position: 'middle',
    duration: 2000
  })
  // 跳转到第一个指南的详情页面
  if (guideList.value.length > 0) {
    router.push(`/guide-detail/${guideList.value[0].GuideId}`)
  } else {
    router.push('/guide-detail/1')
  }
}

const showGuideDetail = (guide: GuideItem) => {
  // 跳转到指南详情页面，传递指南ID
  router.push(`/guide-detail/${guide.GuideId}`)
}

const showFeatureNotReady = () => {
  showToast({
    message: '功能开发中，敬请期待！',
    position: 'middle',
    duration: 2000
  })
}

const goToHome = () => {
  router.push('/')
}

const goToProfile = () => {
  router.push('/profile')
}

// 组件挂载时获取数据
onMounted(() => {
  fetchGuideData()
})
</script>

<style scoped>
.medical-guide-container {
  min-height: 100vh;
  background: #f8f9fa;
  position: relative;
  padding-bottom: 80px;
}

/* 状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: white;
  font-size: 14px;
  color: #333;
}

.status-icons {
  display: flex;
  gap: 5px;
}

/* 头部 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: white;
  border-bottom: 1px solid #eee;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.back-button {
  font-size: 20px;
  color: #333;
  cursor: pointer;
  padding: 5px;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.header-right {
  display: flex;
  gap: 15px;
}

.menu-icon {
  font-size: 18px;
  color: #666;
  cursor: pointer;
  padding: 5px;
}

.target-icon {
  font-size: 18px;
  color: #666;
  cursor: pointer;
  padding: 5px;
}

/* 通知横幅 */
.notification-banner {
  background: linear-gradient(135deg, #87ceeb 0%, #98d8e8 100%);
  margin: 20px;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: transform 0.2s;
  box-shadow: 0 4px 12px rgba(135, 206, 235, 0.3);
}

.notification-banner:hover {
  transform: translateY(-2px);
}

.banner-content {
  color: white;
}

.banner-text {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.highlight {
  color: #1e3a8a;
  font-weight: bold;
}

.banner-action {
  font-size: 14px;
  color: #1e3a8a;
  font-weight: bold;
}

/* 章节标题 */
.section-header {
  padding: 0 20px;
  margin-bottom: 20px;
}

.section-header h2 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

.loading-text {
  font-size: 16px;
  color: #666;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 指南列表 */
.guide-list {
  padding: 0 20px;
}

.guide-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 20px;
  margin-bottom: 15px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s;
}

.guide-item:hover {
  transform: translateY(-2px);
}

.guide-content {
  flex: 1;
}

.guide-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.guide-date {
  font-size: 14px;
  color: #999;
}

.guide-stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.view-count {
  font-size: 14px;
  color: #666;
}

.arrow {
  font-size: 16px;
  color: #999;
}

/* 底部导航栏 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: white;
  border-top: 1px solid #eee;
  padding: 10px 0;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 5px;
}

.nav-icon {
  font-size: 20px;
  margin-bottom: 5px;
}

.nav-text {
  font-size: 12px;
  color: #666;
}

.nav-item.active .nav-text {
  color: #007bff;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .guide-item {
    padding: 15px;
  }
  
  .guide-title {
    font-size: 15px;
  }
  
  .banner-text {
    font-size: 14px;
  }
}
</style> 